body {
    background-color: #eeeeee;
}

.banner {
    position: relative;
    & ul li {
        display: none;
        &.on {
            display: block;
        }
    }
    & img {
        width: 100%;
        height: 3rem;
    }
    /* 轮播图小圆点 */
    & ol {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0.2rem;
        width: 0.76rem;
        height: 0.12rem;
        display: flex;
        justify-content: space-between;
        & li {
            width: 0.12rem;
            height: 0.12rem;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            &.on {
                background-color: #fff;
            }
        }
    }
}

.top-nav {
    /* 导航栏大盒子 */
    background-color: #fff;
    height: 3.88rem;
    & ul {
        display: flex;
        /* 换行 */
        flex-wrap: wrap;
        /* align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线 */
        /* align-content: space-around; */
        /* 交叉轴居中对齐 */
        /* align-items: center; */
        /* 主轴居中对齐 */
        /* justify-content: center; */
        height: 3.88rem;
        /* 控制第二排 */
        & li:nth-child(4)~li {
            position: relative;
            bottom: -0.2rem;
        }
        /* 控制第一排 */
        & li:not(li:nth-child(4)~li) {
            position: relative;
            top: 0.4rem;
        }
        & li {
            width: 25%;
            display: flex;
            /* 图标和解释上下排列 */
            flex-direction: column;
            /* 交叉轴对齐，此时主轴为上下方向，所以交叉轴为左右方向*/
            align-items: center;
            /* 主轴对齐，此时主轴为上下方向，未来后续定位处理，所以先不center，因为flex大于定位*/
            /* justify-content: center; */
            /* position: relative;
top: 0.4rem; */
            & .img {
                width: 0.9rem;
                height: 0.9rem;
                border-radius: 50%;
                /* 图标是文字类型，用line-height等于行高来设置垂直居中对齐 */
                line-height: 0.9rem;
                /* 图标是文字类型，用text-align设置center来水平居中对齐 */
                text-align: center;
            }
            & .img1 {
                background-image: linear-gradient( 90deg, rgb(255, 154, 158) 0%, rgb(255, 198, 182) 100%);
            }
            & .img2 {
                background-image: linear-gradient( 90deg, rgb(161, 196, 253) 0%, rgb(194, 233, 251) 100%);
            }
            & .img3 {
                background-image: linear-gradient( 90deg, rgb(132, 250, 176) 0%, rgb(167, 255, 246) 100%);
            }
            & .img4 {
                background-image: linear-gradient( 90deg, rgb(253, 203, 241) 0%, rgb(230, 222, 233) 100%);
            }
            & .img5 {
                background-image: linear-gradient( 90deg, rgb(246, 173, 101) 0%, rgb(255, 156, 117) 100%);
            }
            & .img6 {
                background-image: linear-gradient( 90deg, rgb(255, 154, 158) 0%, rgb(254, 207, 239) 100%);
            }
            & .img7 {
                background-image: linear-gradient( 90deg, rgb(195, 194, 246) 0%, rgb(251, 200, 212) 100%);
            }
            & .img8 {
                background-image: linear-gradient( 90deg, rgb(168, 216, 255) 0%, rgb(146, 240, 227) 100%);
            }
            & h2 {
                position: relative;
                top: 0.14rem;
                font-size: 0.26rem;
                font-weight: 350;
                /*font-family: "Adobe 黑体 Std";*/
            }
        }
    }
}

.content1 {
    height: 4.08rem;
    & .title1 {}
    & ul {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-evenly;
        & li {
            margin: 0.1rem;
            position: relative;
            left: 0.1rem;
            & img {
                width: 2rem;
                height: 2.08rem;
            }
            & h3 {
                font-size: 0.2rem;
                font-weight: 400;
            }
        }
    }
}

.content2 {
    height: 5.3rem;
    & .title2 {}
    & ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
        top: 0;
        & li {
            & img {
                width: 3.43rem;
                height: 2.62rem;
            }
            & h3 {
                font-size: 0.28rem;
                font-weight: 400;
            }
        }
    }
}


/* 公共样式 */


/* 大盒子公共样式 */

.content {
    margin-top: 0.2rem;
    background-color: #fff;
}

.title {
    display: flex;
    justify-content: space-between;
}


/* 标题左 */

.h2 {
    border-left: 0.035rem var(--m-c) solid;
    /* 缩进 */
    text-indent: 0.2rem;
    margin: 0.1rem 0;
    font-size: 0.32rem;
    font-weight: 400;
}


/* 标题右 */

.span {
    margin: 0.1rem 0;
    font-size: 0.24rem;
}


/* 照片以及装照片的盒子之间相隔的距离 */

.space {
    margin: 0.1rem;
    position: relative;
    left: 0.1rem;
}


/* 


background-color: #fff;
    position: relative;
    top: 0.2rem;
    & .title2 {
        & h2 {
            border-left: 0.035rem var(--m-c) solid;
            /* 缩进 

text-indent: 0.2rem;
margin: 0.1rem 0;

}

}
& ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    & img {
        width: 3.43rem;
        height: 2.62rem;
    }
}
*/